<template>
  <div class="demo-app">
    <div class="demo-app-main">
      <!--       <FullCalendar class="demo-app-calendar" :options="calendarOptions">
        <template v-slot:eventContent="arg">
          <b>{{ arg.timeText }}</b>
          <i>{{ arg.event.title }}</i>
        </template>
      </FullCalendar> -->
      <lunar-full-calendar ref="calendar" :events="events" :config="config" @event-selected="eventClick" @callback="callback" @day-click="dayClick"></lunar-full-calendar>
    </div>
    <Add v-model="addModal" @add="addEvents" />
    <!-- <Info v-model="infoModal" :info="form" /> -->
    <Detail v-model="infoModal" :info="form" @showEdit="showEdit" />
    <Edit v-model="editModel" />
  </div>

</template>

<script>
import FullCalendar from '@fullcalendar/vue'
// import dayGridPlugin from '@fullcalendar/daygrid'
// import timeGridPlugin from '@fullcalendar/timegrid'
// import listPlugin from '@fullcalendar/list'
// import interactionPlugin from '@fullcalendar/interaction'
// import { INITIAL_EVENTS, createEventId } from '@/assets/event-utils'
import Add from '@/views/my/components/add'
import Info from '@/views/my/components/info'
import Detail from '@/views/my/components/detail'
import dayjs from 'dayjs'
import Edit from '@/views/my/components/edit'
// import calenderFormate from '@/utils/calendar'// 农历计算方法
// import { formatDate } from '@/utils/index'
import { LunarFullCalendar } from 'vue-lunar-full-calendar'

export default {
  components: {
    FullCalendar, // make the <FullCalendar> tag available
    Add,
    Info,
    Detail,
    Edit,
    LunarFullCalendar
  },
  data () {
    let self = this
    return {
      addModal: false,
      form: {},
      showEdit: false,
      infoModal: false,
      editModel: false,
      events: [],
      config: {
        eventLimitText: '更多',
        lunarCalendar: true, // 控制中文日历是否显示为真
        locale: 'zh-cn', // 中文
        eventColor: 'white',
        header: {
          left: 'prevYear,prev,next,nextYear',
          center: 'title',
          right: 'hide,custom, today'
        },
        eventLimit: true, // 一天中显示多少条事件，多了隐藏
        firstDay: 0, // 控制周一周日那个在前面
        defaultView: 'month',
        buttonText: {
          today: '今天',
          month: '月',
          week: '周',
          day: '日'
        },
        // 分页方法
        viewRender (view, element) {
          self.viewRender(view, element)
        }
        /*         customButtons: { // 新增按钮
                  hide: {
                    text: '隐藏农历',
                    click: function () {
                      self.$refs.calendar.fireMethod('option', {
                        lunarCalendar: false
                      })
                      self.$refs.calendar.fireMethod('option', {
                        header: {
                          left: 'prevYear,prev,next,nextYear',
                          center: 'title',
                          right: 'show,custom, today'
                        }
                      })
                    }
                  },
                  show: {
                    text: '显示农历',
                    click: function () {
                      self.$refs.calendar.fireMethod('option', {
                        lunarCalendar: true
                      })
                      self.$refs.calendar.fireMethod('option', {
                        header: {
                          left: 'prevYear,prev,next,nextYear',
                          center: 'title',
                          right: 'hide,custom, today'
                        }
                      })
                    }
                  }
                } */
      }
    }
  },
  filters: {
    dateFilter (date) {
      return dayjs(date).format('YYYY-MM-DD HH:mm:ss')
    }
  },
  created () {
    // this.viewRender()
    // 模拟异步数据
    setTimeout(() => {
      this.events = [
        {
          id: '1',
          title: 'event 1',
          extendedProps: {},
          description: '这是一个事件',
          start: '2021-06-01 12:00:00',
          end: '2021-01-07',
          textColor: '#000',
          backgroundColor: 'red',
          borderColor: 'red'
        },
        { id: '2', title: 'event 2', start: '2021-06-01 12:00:00' },
        { id: '3', title: 'event 1', start: '2021-05-01 12:00:00' },
        { id: '4', title: 'event 2', start: '2021-07-01 12:00:00' },
        { id: '5', title: 'event 3', start: '2021-06-02 12:00:00' },
        { id: '6', title: 'event 4', start: '2021-06-03 12:00:00' },
        {
          id: '7',
          title: 'event 2',
          start: '2021-07-07 07:00:00',
          textColor: 'yellow',
          backgroundColor: 'red',
          className: ['red']
        },
        {
          id: '8',
          title: 'event 5',
          start: '2021-06-08 12:00:00',
          end: '2021-01-08 14:00:00',
          color: 'yellow'
          // textColor: 'red',
          // backgroundColor: 'red',
          // borderColor: 'yellow'
        },
        {
          id: '9',
          title: 'event 5',
          start: '2021-06-09 12:00:00'
          // textColor: 'yellow'
          // borderColor: 'yellow',
          // backgroundColor: 'red'
        }
      ]
    }, 2000)
  },
  methods: {
    // 如果没有点击事件需求 此处可省略
    viewRender (view, element) {
      // 获取要查询月份的时间戳
      var time = view.calendar.currentDate._i
      this.years = this.$moment(time).format('YYYYMM')
      // initDta为初始化方法 是根据页面需求 调用接口 查询调转日期的方法
      this.initData(this.years)
    },
    // 日历事件点击事件
    eventClick (event, jsEvent, pos) {
    },
    // 背景点击事件
    dayClick (date, jsEvent, view) {
    },
    callback () {

    },
    addEvents () { }
  }
}
</script>

<style lang="less" scoped>
.demo-app {
  display: flex;
  min-height: 100%;
  font-family: Arial, Helvetica Neue, Helvetica, sans-serif;
  font-size: 14px;
  color: #333;
  margin-top: 20px;
  .demo-app-main {
    a {
      color: #707071;
    }
    flex-grow: 1;
    // padding: 2em;
    .demo-app-calendar {
      /deep/.fc-event,
      .fc-event-dot {
        border: none;
        background-color: #1a85ffec;
        :hover {
          background-color: #71b3ffec;
        }
      }
      .fc-daygrid-day-number {
        color: #707071;
      }
      .fc-event-main {
        border: none;
      }
      b {
        /* used for event dates/times */
        margin-right: 3px;
        text-align: left;
      }
      background-color: white;
      .fc-daygrid-event {
        .fc-daygrid-event-dot {
          display: none;
        }
        &.cal {
          padding-left: 5px;
          color: #333;
          border-radius: 0;
          border: none;
          border-left: 2px solid #5289ff;
          background-color: #eef3ff;
          .fc-event-title {
            color: #333;
          }
        }
        &.inv {
          padding-left: 5px;
          color: #333;
          border-radius: 0;
          border: none;
          border-left: 2px solid #ffa327;
          background-color: #fff6e9;
          .fc-event-title {
            color: #333;
          }
        }
      }
      .fc-timegrid-event {
        .fc-daygrid-event-dot {
          display: none;
        }
        &.cal {
          padding-left: 5px;
          color: #333;
          border-radius: 0;
          border: none;
          border-left: 2px solid #5289ff;
          background-color: #eef3ff;
          .fc-event-title {
            color: #333;
          }
        }
        &.inv {
          padding-left: 5px;
          color: #333;
          border-radius: 0;
          border: none;
          border-left: 2px solid #ffa327;
          background-color: #fff6e9;
          .fc-event-title {
            color: #333;
          }
        }
      }
      .fc .fc-toolbar-title {
        display: inline-block;
        vertical-align: middle;
      }
      .fc-theme-standard td {
        border-top-color: transparent;
      }
      .fc .fc-toolbar {
        padding: 0 20px;
      }
      .fc-col-header-cell {
        .fc-scrollgrid-sync-inner {
          a {
            color: #333;
          }
        }
      }
    }
  }
}

.demo-app-sidebar {
  /* width: 300px; */
  line-height: 1.5;
  background: #eaf9ff;
  border-right: 1px solid #d3e2e8;
}
</style>
